<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        <button onclick="windAdd()">添加波浪场</button>
        <button onclick="setOptions()">修改参数</button>
        <button onclick="show(true)">显示</button>
        <button onclick="show(false)">隐藏</button>
        <button onclick="destroy()">销毁</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>
    <script src="../libs/cpc/index.js"></script>
    <script>
        let windy = null;
        const map = new cpc.Map({
            container: "cesiumContainer",
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ],
        });

        function windAdd() {
            windy = new cpc.VectorFieldLayer("../datas/windy/auswave_pop_flds_combined.json", {
                colorScale: [
                    "rgb(36,104, 180)",
                    "rgb(60,157, 194)",
                    "rgb(128,205,193)",
                    "rgb(151,218,168)",
                    "rgb(198,231,181)",
                    "rgb(238,247,217)",
                    "rgb(255,238,159)",
                    "rgb(252,217,125)",
                    "rgb(255,182,100)",
                    "rgb(252,150,75)",
                    "rgb(250,112,52)",
                    "rgb(245,64,32)",
                    "rgb(237,45,28)",
                    "rgb(220,24,32)",
                    "rgb(180,0,35)",
                ],
                frameRate: 16,
                maxAge: 60,
                globalAlpha: 0.9,
                velocityScale: 1 / 30,
                paths: 2000,
            });
            map.add(windy);
        }
        function show(isShow) {
            windy.show = isShow;
        }
        function setOptions() {
            windy.setOptions({
                globalAlpha: 0.8,
                maxAge: 60,
                paths: 2000,
                velocityScale: 0.03,
                lineWidth: 5,
            });
        }
        function destroy() {
            if (windy) {
                windy.destroy();
            }
        }
    </script>
</body>

</html>